<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<%@ include file="/common/include/title.jsp" %>
		<link rel="stylesheet" href="${rootPath }/common/resouce/static/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<title>产品分类</title>
	</head>
	<body>
		<!-- 如何获取请求体中的内容呢?信封的内容
			request.getParamater;但是我们目前所处的位置 是jsp;
			jsp里面不能写java代码
			EL表达式如何获取和request.getParamater;一样的效果
			
			?键=值&键=值&键=值
			{param.键}
		 -->
		roleId:====${param.roleId }
		<nav class="breadcrumb">
			<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
			产品管理 <span class="c-gray en">&gt;</span> 产品分类 <a
				class="btn btn-success radius r"
				style="line-height: 1.6em; margin-top: 3px"
				href="javascript:location.replace(location.href);" title="刷新"><i
				class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<table class="table">
			<tr>
				<td width="200" class="va-t">
					<ul id="treeDemo" class="ztree"></ul>
					<c:if test="${param.roleId != '' && param.roleId != null }">
						<input type="button" value="提交" onclick="checkNode()">
					</c:if>
				</td>
				<c:if test="${param.roleId == '' || param.roleId == null }">
					<td class="va-t">
						<!-- ifrmae相当于jsp里面的包含
							src:就是被包含的网址
						 -->
						<iframe ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=390px
							SRC="http://www.baidu.com"></iframe>
					</td>
				</c:if>
			</tr>
		</table>
	
		<!--请在下方写此页面业务相关的脚本-->
		<script type="text/javascript" src="${rootPath }/common/resouce/static/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
		<script type="text/javascript">
			/*
				树形结构使用的是ztree框架
			*/
			var setting = {
					view : {
						/* 双击展开 */
						dblClickExpand : false,
						/* 是否显示线 */
						showLine : false,
						/* 是否多选 */
						selectedMulti : false
					},
					check:
					{
						<c:if test="${param.roleId != '' && param.roleId != null }">
							/* 开启复选框 */
							"enable":true
						</c:if>
					},
					data : {
						/* 树形结构里面的数据长什么样子 */
						simpleData : {
							enable : true,
							idKey : "id",
							pIdKey : "pId",
							rootPId : ""
						}
					},
					callback : {
						beforeClick : function(treeId, treeNode) {
							var zTree = $.fn.zTree.getZTreeObj("tree");
							if (treeNode.isParent) {
								zTree.expandNode(treeNode);
								return false;
							} else {
								/* 为iframe的src属性赋值 */
								demoIframe.attr("src", treeNode.file + ".html");
								return true;
							}
						}
					}
				};
				/* 所有的数据都在这它是一个json
					不能加双引号
					人家没有加
					加上就是字符串了,不在是对象了 */
					var zNodes = ${requestScope.resultArr} ;
					/* var zNodes = [
					{"id":"1","pid":"","name":"测试数据","file":"http://www.hao123.com"},
					{"id":"2","pid":"","name":"测试数据_2","file":"http://www.hao123.com","checked":true},
					] ; */
				//var zNodes = [ {
					/* 唯一标识 */
					//id : 1,
					/* 上一级id,0:表示第一级 */
					//pId : 0,
					/* 名字 */
					//name : "一级分类",
					/* 是展开还是收起 */
					//open : true
				//}
		
				var code;
		
				function showCode(str) {
					if (!code)
						code = $("#code");
					code.empty();
					code.append("<li>" + str + "</li>");
				}
		
				$(document).ready(function() {
					var t = $("#treeDemo");
					t = $.fn.zTree.init(t, setting, zNodes);
					demoIframe = $("#testIframe");
					//demoIframe.on("load", loadReady);
					var zTree = $.fn.zTree.getZTreeObj("tree");
					//zTree.selectNode(zTree.getNodeByParam("id",'11'));
				});
		</script>
	</body>
</html>